{% extends 'base.html' %}

{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{ url_for('static', filename='lib/leaflet.css') }}">
{% endblock %}

{% block content %}

<div class="container">
<div id="bar-chart"></div>

<div class="row">
    <div class="col py-3 border bg-light"><b>Latitude: </b><span id="lat_value"></span></div>
    <div class="col py-3 border bg-light"><b>Longitude: </b><span id="lon_value"></span></div>
    <div class="col py-3 border bg-light"><b>Height: </b><span id="height_value"></span></div>
</div>

<div id="map" style="height: 420px; margin-top: 2em; margin-bottom: 2em;">
    
</div>

</div>
{% endblock %}

{% block scripts %}
{{super()}}
<script type="text/javascript" src="{{ url_for('static', filename='lib/d3.v3.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='graph.js') }}" charset="utf-8"></script>
<script type="text/javascript" src="{{ url_for('static', filename='lib/leaflet.js') }}" charset="utf-8"></script>
<script> 
// baseCoordinates and maptiler_key are used inside status.js
var baseCoordinates = {{ base_coordinates|tojson }};
var maptiler_key = '{{ tms_key.maptiler_key }}';
</script>
<script type="text/javascript" src="{{ url_for('static', filename='status.js') }}" charset="utf-8"></script>
{% endblock %}